<template>
  <div className="app-hamburger" @click="toggleSiderBar">
    <el-icon v-if="appStore.collapsed"><Expand /></el-icon>
    <el-icon v-else><Fold /></el-icon>
  </div>
</template>

<script setup lang="ts">
import { Expand, Fold } from '@element-plus/icons-vue'
import { useAppStore } from '@/store'

const appStore = useAppStore()
const toggleSiderBar = () => {
  appStore.setCollapsed(!appStore.collapsed)
}
</script>

<style scoped>
.app-hamburger {
  cursor: pointer;
  margin-left: 10px;
}
</style>
